{*
SPDX-FileCopyrightText: © 2021 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
{{ extends "./base" }}
{{- import "/_libs/forms" -}}
{{- import "/_libs/pagination" -}}

{{ block title() }}{{ .PageTitle }}{{ end }}

{{ block mainContent() -}}


<turbo-frame id="bookmark-list"
 data-controller="turbo-refresh"
 data-turbo-refresh-interval-value="10"
 data-turbo-refresh-on-value="[data-bookmark-deleted='true']">

  <div class="group -mt-8 py-4 -mx-6 px-6 w-100 border-b border-gray-200 border-opacity-80
    bg-gradient-to-r from-gray-100 to-app-bg
    sm:pt-11
    print:hidden
  ">
    <label for="create-url"
     class="inline-block ml-4 my-1 text-sm font-semibold cursor-pointer invisible group-hfw:visible"
    >Save a new link</label>
    <form action="{{ urlFor(`/bookmarks`) }}" method="post"
       data-controller="turbo-form"
       data-turbo-frame="_top">
        {{ yield csrfField() }}
        <div class="flex p-1 form-input rounded-full border">
          <input type="text" name="url" id="create-url" size="15"
           class="leading-tight w-full rounded-full px-4 py-2 bg-gray-light focus-visible:bg-gray-light text-gray-dark ring-0 ring-offset-0"
           value="{{ string(.Form.Get(`url`).String()) }}" placeholder="https://" />
          <button type="submit" class="whitespace-nowrap btn-primary rounded-full pl-0.5 py-0 inline-flex gap-1 items-center leading-none">
            {{ yield icon(name="o-create", class="text-yellow-400 dark:text-yellow-600", svgClass="h-8 w-8") }}
            <span>Save link</span>
          </button>
        </div>

        {{- if .Form.Errors() -}}
          {{ range .Form.Errors() }}<p class="ml-4 text-red-700"><strong>{{ .Error() }}</strong></p>{{- end -}}
        {{- end -}}
        {{- if .MaybeSearch -}}
          {{- yield message() content -}}
          "{{ .Form.Get(`url`).String() }}" is not a valid address. Did you mean to search your bookmarks for
          <a data-turbo-frame="_top" href="{{ urlFor(`/bookmarks`) }}?bf=1&search={{ .Form.Get(`url`).String() }}"
           class="link font-bold">"{{ .Form.Get(`url`).String() }}"</a>?
          {{- end -}}
        {{- else if .Form.Get("url").Errors -}}
          {{- yield message(type="error") content -}}
            <ul>
              {{ range .Form.Get("url").Errors }}<li>{{ . }}</li>{{ end }}
            </ul>
          {{- end -}}
        {{- end -}}
      </form>
  </div>

  {{- if .Count.Total == 0 -}}
    <div class="my-6 flex gap-4">
      <div class="-mt-9">
        {{ yield icon(name="o-big-arrow", class="text-yellow-500", svgClass="h-36", viewBox="0 0 50 250") }}
      </div>
      <div class="flex-grow-0 max-w-xl">
        <h1 class="title text-h3">Welcome to Readeck!</h1>
        <p class="text-xl mb-4 p-4 text-blue-800 bg-yellow-100 border border-blue-800 rounded">
            You don't have any bookmarks yet.<br> Copy a link in the field above and start saving.
        </p>
        <p>Read more about bookmarks in the <a class="link" href="{{ urlFor(`/docs`) }}">documentation</a>.</p>
      </div>
    </div>
  {{- end -}}

  {{- if isset(.Filters) && .Count.Total > 0 }}
  <form action="{{ urlFor(`/bookmarks`) }}" method="get"
   class="my-4 pt-2">
    <input type="hidden" name="bf" value="1" />

    <div class="relative">
      <h1 class="title text-h2">{{ .PageTitle }}</h1>

      {{- if .Filters.IsActive() -}}
        <p class="mb-2">
        {{- if .Pagination.TotalCount == 0 -}}
          Your search query yielded <strong>no results</strong>.
        {{- else if .Pagination.TotalCount == 1 -}}
          Your search query yielded <strong>1 result</strong>.
        {{- else -}}
          Your search query yielded <strong>{{ .Pagination.TotalCount }} results</strong>.
        {{- end -}}
        </p>
      {{- end -}}

      <details class="print:hidden" {{- if .Filters.IsActive() }} open{{- end -}}>
        <summary class="
          inline-block md:absolute md:right-0 md:top-3
          link py-1 px-4 border border-primary rounded-full
          hf:bg-yellow-100
        ">{{ yield icon(name="o-filter") }} Filter list</summary>
        <div class="bg-gray-100 border rounded p-2 text-sm max-md:mt-2">
          {{ include("./components/filters") .Filters }}

          <div class="mt-4 flex gap-2 items-center">
            <button class="btn btn-primary">Search</button>
            {{ if .Filters.IsActive() -}}
              <span class="flex-grow">
                <a href="{{ urlFor() }}?bf=1" class="btn rounded">Reset search</a>
              </span>
              <a href="{{ urlFor(`/bookmarks/collections/add`)}}?{{ .Filters.GetQueryString() }}"
                class="link font-semibold">Create a collection</a>
            {{- end }}
          </div>

        </div>
      </details>
    </div>
  </form>
  {{ end -}}

  {{- include "./components/bookmark_list" -}}
</turbo-frame>
{{- end }}
